<template>
	<view class="box">
		<view class="header">
			<view class="header_left" @click="go">
				<image src="https://s1.ax1x.com/2022/12/03/zrnYhF.jpg" mode=""></image>
				返回
			</view>
			<view class="header_center">
				报修记录
			</view>
			<view class="header_right" @click="add">
				添加
			</view>
		</view>
		<view class="top">
			<view :class="{current:item.state ===curState}" v-for="item in tabArr" :key="item.state"
				@click="chengaState(item.state)">
				{{item.name}}
			</view>
		</view>
		<view class="list" v-for="item in list" :key="item.id" >
			<view class="list_top">
				{{item.content}}
			</view>
			<view class="list_center" >
				<view class="" v-for="Img in item.images" :key="Img.id">
					<image :src="IMGURL+Img.url" mode=""></image>
				</view>
			</view>
			<view class="list_plot">
				<text>{{item.address}}</text>
				<text>水管漏水</text>
			</view>
			<view class="time">
				<text>{{item.addtime}}</text>
				<view class="btu">
					<view class="btu_left" @click="details(item.id)">
						{{item.statename}}
					</view>
					<view class="btu_right" @click="del(item.id)">
						撤销
					</view>
				</view>
			</view>
		</view>
		<view class="btm">
			
		</view>
	</view>
</template>

<script>
	import {repairslist,repairsdel} from '../../utils/api.js'
	import {IMG} from '../../utils/cofing.js'
	export default {
		data() {
			return {
				IMGURL:IMG,
				curState: 1, // 当前报修状态
				searchData: {
					state: 1, // 未处理
					page: 1, // 当前页码
					psize: 5 // 一页显示多少条数据
				},
				tabArr: [{
						state: 1,
						name: '未处理',

					},
					{
						state: 3,
						name: '已处理'
					},
					{
						state: 0,
						name: '全部'
					},
				],
				list:[]
			}
		},
		onLoad() {
		this.getrepairslist()
		},
		methods: {
			async del(id){
				const [, { cancel }] =	await uni.showModal({
						title: '确定要删除吗？'
					})
				let res = await repairsdel({id:id})
				if(res.errCode===10000){
					uni.showToast({
						title:'删除成功',
						icon:'success'
					})
					this.getrepairslist()
				}else{
					uni.showToast({
						title:'删除失败',
						icon:'error'
					})
				}
			},
			async getrepairslist(){
				let res = await repairslist(this.searchData)
				console.log(res);
				if(res.errCode==10000){
					this.list = res.data.list
				}
			},
			chengaState(state){
				console.log(state);
				this.curState =state
				this.searchData.state = state
				this.searchData.page = 1
				console.log(this.curState,this.searchData.state );
				this.getrepairslist()
			},
			details(id){
				console.log(id);
				uni.navigateTo({
					url:'./details/details?id='+id
				})
			},
			add(){
				uni.navigateTo({
					url:'./addrepair/addrepair'
				})
			},
			go() {
				uni.switchTab({
					url: '../home'
				})
			},
		}
	}
</script>

<style lang="less">
	.box {
		width: 100%;
		height: 100vh;
		background-color: #f0f0f0;

		.header {
			width: 710rpx;
			height: 145rpx;
			background-color: #fff;
			padding: 0 20rpx;
			font-size: 29rpx;
			display: flex;
			align-items: center;

			.header_left {
				flex: 1;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.header_center {
				text-align: center;
				flex: 1;
			}

			.header_right {
				flex: 1;
				color: #0080fe;
				text-align: right;
			}
		}

		.top {
			width: 650rpx;
			height: 70rpx;
			background-color: #fff;
			padding: 0 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			font-size: 29rpx;

			.current {
				color: #4ccfff;
			}
		}
		.list{
			width: 730rpx;
			height: 518rpx;
			background-color: #fff;
			margin-left: 10rpx;
			border-radius: 10rpx;
			margin-top: 22rpx;
			
			.list_top{
				width: 660rpx;
				height: 98rpx;
				padding-top: 64rpx;
				margin-left: 35rpx;
				line-height: 45rpx;
				font-size: 26rpx;
			}
			.list_center{
				width: 660rpx;
				height: 155rpx;
				margin-left: 35rpx;
				display: flex;
				
				image{
					margin-right: 50rpx;
					width: 183rpx;
					height: 155rpx;
				}
			}
			.list_plot{
				width: 660rpx;
				height: 100rpx;
				margin-left: 35rpx;
				border-bottom: 1rpx solid #efefef;
				font-size: 26rpx;
				color: #666666;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					margin: 0 10rpx;
				}
			}
			.time{
				width: 660rpx;
				height: 75rpx;
				margin-left: 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					margin-left: 10rpx;
					font-size: 20rpx;
					color: #666666;
				}
				.btu{
					display: flex;
					font-size: 26rpx;
					.btu_left{
						width: 126rpx;
						height: 48rpx;
						border: 1rpx solid #a8aaad;
						border-radius: 15rpx;
						color: #666666;
						text-align: center;
						line-height: 48rpx;
						margin-right: 30rpx;
					}
					.btu_right{
						width: 128rpx;
						height: 50rpx;
						background-color: #00a2f1;
						border-radius: 15rpx;
						color: #fff;
						text-align: center;
						line-height: 48rpx;
					}
				}
			}
		}
		.btm{
			width: 100%;
			height: 100rpx;
		}
	}
</style>
